<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>视频源信息表</title>
  <!-- 引入 Vue -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
  <!-- 引入 Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body {
      padding: 2rem;
    }

    .flex-gap {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 1rem;
    }

    .form-label {
      white-space: nowrap;
    }

    .table-container {
      overflow-x: hidden; /* 禁止横向滚动 */
    }

    .table thead th,
    .table tbody td {
      vertical-align: middle;
    }

    .table th:nth-child(1),
    .table td:nth-child(1) {
      width: 50px;
    }

    .table th:nth-child(2),
    .table td:nth-child(2) {
      width: 180px;
      word-wrap: break-word;
      white-space: normal; /* 允许换行 */
    }

    .table th:nth-child(3),
    .table td:nth-child(3) {
      width: 140px;
    }

    .table th:nth-child(4),
    .table td:nth-child(4) {
      width: 100px;
    }

    .table th:nth-child(5),
    .table td:nth-child(5) {
      width: 120px;
    }

    .table th:nth-child(6),
    .table td:nth-child(6) {
      width: 80px;
    }

    .table th:nth-child(7),
    .table td:nth-child(7) {
      width: 80px;
    }

    .table th:nth-child(8),
    .table td:nth-child(8) {
      width: 160px;
    }

    .table th:nth-child(9),
    .table td:nth-child(9) {
      width: 100px;
    }
    .highlight {
      background-color: #ffeeba;
      color: #856404;
      padding: 2px 4px;
      border-radius: 3px;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="container">
      <h2 class="mb-4">视频源信息表</h2>

      <!-- 搜索栏 -->
      <div class="flex-gap mb-3">
        <label for="searchInput" class="form-label">关键字：</label>
        <input 
          v-model="searchQuery" 
          type="text" 
          class="form-control" 
          placeholder="输入关键词搜索视频标题、平台或品牌"
          style="width: 200px;"
        >
        <button class="btn btn-primary" @click="performSearch">搜索</button>
        <button class="btn btn-success" @click="goToAddPage">录入</button>
      </div>

      <!-- 加载状态提示 -->
      <div v-if="loading" class="alert alert-info">加载中...</div>
      <div v-if="error" class="alert alert-danger">{{ error }}</div>

      <!-- 表格容器（去掉横向滚动） -->
      <div class="table-container">
        <table v-if="filteredVideos.length > 0" class="table table-striped table-bordered table-hover">
          <thead class="table-dark">
            <tr>
              <th scope="col">序号</th>
              <th scope="col">视频标题</th>
              <th scope="col">发布时间</th>
              <th scope="col">平台</th>
              <th scope="col">品牌</th>
              <th scope="col">评论量</th>
              <th scope="col">观看量</th>
              <th scope="col">字幕处理状态</th>
              <th scope="col">评论处理状态</th>
            </tr>
          </thead>
          <!-- src/views/video_table.html 修改部分 -->
        <tbody>
          <tr v-for="(video, index) in paginatedVideos" :key="video.id">
            <td>{{ index + 1 }}</td>
            <td v-html="video.video_title"></td>
            <td v-html="video.publish_date || '-'"></td>
            <td v-html="video.platform"></td>
            <td v-html="video.brand || '-'"></td>
            <td v-html="video.comment_count"></td>
            <td v-html="video.view_count"></td>
            <td v-html="video.subtitle_process_status || '-'"></td>
            <td v-html="video.comment_process_status"></td>
          </tr>
        </tbody>
        </table>
      </div>

      <!-- 无数据提示 -->
      <p v-if="filteredVideos.length === 0 && !loading" class="text-muted">暂无数据</p>

      <!-- 分页组件 -->
      <nav v-if="totalPages > 1" class="d-flex justify-content-center pagination mt-3">
        <ul class="pagination">
          <li class="page-item" :class="{ disabled: currentPage === 1 }">
            <a class="page-link" href="#" @click.prevent="currentPage = Math.max(1, currentPage - 1)">上一页</a>
          </li>
          <li v-for="page in totalPages" :key="page" class="page-item" :class="{ active: page === currentPage }">
            <a class="page-link" href="#" @click.prevent="currentPage = page">{{ page }}</a>
          </li>
          <li class="page-item" :class="{ disabled: currentPage === totalPages }">
            <a class="page-link" href="#" @click.prevent="currentPage = Math.min(totalPages, currentPage + 1)">下一页</a>
          </li>
        </ul>
      </nav>
    </div>
  </div>

  <!-- 引入 JS 文件 -->
  <script type="module" src="/static/js/video_table.js"></script>
</body>
</html>